import { useIntersectionObserver } from '@vueuse/core'

/**
 * 图片懒加载插件
 */
export const imgLazyPlugin = {
    install(app) {
        //懒加载逻辑
        //img-lazy自定义指令
        app.directive('img-lazy', {
            //el表示element元素,比如img,那么就会有el.src属性,可以直接dom操作
            //binding是值，binding.value就是自定义指令传入的值,比如图片这里就是url
            mounted(el, binging) {
                //监听el对象，isIntersecting为true表示可以看到
                const {stop} = useIntersectionObserver(
                    el,
                    ([{isIntersecting}]) => {
                        //判断如果可以看到，则加载图片
                        if (isIntersecting) {
                            el.src = binging.value;
                            //停止监听,使用useIntersectionObserver返回值的解构函数来停止
                            stop();
                        }
                    },
                );
            },
        });
    }
}